<template>
      <n-card bordered style="width: 100%; max-width: 500px; padding: 20px; border-radius: 12px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
        <n-form ref="formRef" :model="formData" :rules="formRules" label-width="100px">
          <n-form-item label="经度" path="machineLongitude">
            <n-input v-model:value="formData.machineLongitude" type="text" placeholder="请输入经度" />
          </n-form-item>
  
          <n-form-item label="纬度" path="machineLatitude">
            <n-input v-model:value="formData.machineLatitude" type="text" placeholder="请输入纬度" />
          </n-form-item>
  
          <n-form-item style="text-align: center;">
            <n-button type="primary" style="width: 120px;" @click="startMachine">确认</n-button>
          </n-form-item>
        </n-form>

      </n-card>
  </template>
  
  <script setup>
    import { ref, reactive,defineProps} from 'vue';
    import { NInput, NButton, NForm, NFormItem, NCard } from 'naive-ui';
    import axiosInstance from "@/utils/axios";
    import { usemsgStore } from "@/stores/msgwrapper";
    
    const formRef = ref(null);
    const formData = reactive({
      machineLongitude: "",
      machineLatitude: "",
    });
    // 封装消息的状态数据
    const msgStore = usemsgStore()
    const {sendMessage} = msgStore

    
    const formRules = reactive({
      machineLongitude: [
        { required: true, message: "经度不能为空", trigger: "blur" }
      ],
      machineLatitude: [
        { required: true, message: "纬度不能为空", trigger: "blur" }
      ]
    });

    const props = defineProps({
        machineId: {
            type: String,
            required: true,
        },
        machine_point: {
            type: String,
            required: true
        }
});

    
const startMachine = async () => {
    try {
      // 准备要发送的数据
      const rideData = {
        machine_id: props.machineId, 
        machine_origin: {
          longitude: props.machine_point[0],
          latitude: props.machine_point[1],
        },
        machine_destination: {
          longitude: formData.machineLongitude,
          latitude: formData.machineLatitude,
        }, 
      };

      // 发起请求到后端接口
      const response = await axiosInstance.post('/api/start_ride', rideData);

      if (response.data.success) {
        // 成功响应后的处理
        sendMessage("success","骑行成功")
      } else {
        sendMessage("error",response.data.message)
      }
    } catch (error) {
      console.error('请求失败', error);
      alert('请求失败，请重试');
    }
  };
  </script>
  
  <style scoped>
  .content {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* 使容器占满视口高度 */
    background-color: #f9f9f9;
  }
  
  n-card {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 增加阴影 */
  }
  
  n-form-item {
    margin-bottom: 16px; /* 调整项与项之间的间隔 */
  }
  
  n-button {
    width: 100%; /* 按钮宽度自适应 */
    background-color: #409eff; /* 自定义按钮颜色 */
    border-color: #409eff; /* 自定义按钮边框颜色 */
  }
  
  n-button:hover {
    background-color: #66b1ff; /* 悬停时颜色变化 */
    border-color: #66b1ff;
  }
  </style>
  